<template>
  <div>
    <div class="home_top">
      <div class="home_top_div home_top_div_bg1">
        <div class="home_top_div_l">
          <img src="../../assets/img/home1.png" alt="">
        </div>
        <div class="home_top_div_r">
          <div class="home_top_div_r_title">今日订单统计</div>
          <div class="home_top_div_r_box">590</div>
        </div>
      </div>
      <div class="home_top_div home_top_div_bg2">
        <div class="home_top_div_l">
          <img src="../../assets/img/home2.png" alt=""></div>
        <div class="home_top_div_r">
          <div class="home_top_div_r_title">今日预约总数</div>
          <div class="home_top_div_r_box">401</div>
        </div>
      </div>
      <div class="home_top_div home_top_div_bg3">
        <div class="home_top_div_l">
          <img src="../../assets/img/home3.png" alt=""></div>
        <div class="home_top_div_r">
          <div class="home_top_div_r_title">今日签到人数</div>
          <div class="home_top_div_r_box">340</div>
        </div>
      </div>
      <div class="home_top_div home_top_div_bg4">
        <div class="home_top_div_l">
          <img src="../../assets/img/home4.png" alt=""></div>
        <div class="home_top_div_r">
          <div class="home_top_div_r_title">今日收表总数</div>
          <div class="home_top_div_r_box">80</div>
        </div>
      </div>
    </div>
    <div class="home_echar">
      <div class="home_echar_l">
        <div>本周预约记录统计</div>
        <div id="main" style="width: 100%;height:400px;"></div>
      </div>
      <div class="home_echar_l">
        <div>本周体检记录统计</div>
        <div id="mains" style="width: 100%;height:400px;"></div>
      </div>
    </div>
    <div class="home_box">
      <div class="home_box_l">
        <div class="home_box_l_title">一个月内的体检结果异常前10排名统计</div>
        <el-divider></el-divider>
        <div class="home_box_box">
          <div class="home_box_box_title">
            <div>排名</div>
            <div>疾病名称</div>
            <div>病科</div>
            <div>数量</div>
          </div>
          <div class="home_box_box_box">
            <div>7</div>
            <div>糖尿病</div>
            <div>内科</div>
            <div>20</div>
          </div>
          <div class="home_box_box_box">
            <div>6</div>
            <div>心脏病</div>
            <div>内科</div>
            <div>95</div>
          </div>
          <div class="home_box_box_box">
            <div>5</div>
            <div>高血脂</div>
            <div>内科</div>
            <div>126</div>
          </div>
          <div class="home_box_box_box">
            <div>4</div>
            <div>高血压</div>
            <div>内科</div>
            <div>211</div>
          </div>
          <div class="home_box_box_box">
            <div>3</div>
            <div>肺炎</div>
            <div>内科</div>
            <div>321</div>
          </div>
          <div class="home_box_box_box">
            <div>2</div>
            <div>脂肪肝</div>
            <div>内科</div>
            <div>431</div>
          </div>
          <div class="home_box_box_box">
            <div>1</div>
            <div>胆囊炎</div>
            <div>内科</div>
            <div>512</div>
          </div>
        </div>

      </div>
      <div class="home_box_r">
        <div class="home_box_l_title">最近预警记录</div>
        <el-divider></el-divider>
        <div class="home_box_box">
          <div class="home_box_box_title">
            <div>排名</div>
            <div>姓名</div>
            <div>级别</div>
            <div>结果</div>
          </div>
          <div class="home_box_box_box">
            <div>7</div>
            <div>嘉华</div>
            <div>三级</div>
            <div>癌</div>
          </div>
          <div class="home_box_box_box">
            <div>6</div>
            <div>柯村</div>
            <div>二级</div>
            <div>乙肝</div>
          </div>
          <div class="home_box_box_box">
            <div>5</div>
            <div>华硕铭</div>
            <div>一级</div>
            <div>传染</div>
          </div>
          <div class="home_box_box_box">
            <div>4</div>
            <div>李洪涛</div>
            <div>一级</div>
            <div>传染</div>
          </div>
          <div class="home_box_box_box">
            <div>3</div>
            <div>王敏</div>
            <div>一级</div>
            <div>鼠疫</div>
          </div>
          <div class="home_box_box_box">
            <div>2</div>
            <div>刘荣</div>
            <div>三级</div>
            <div>癌</div>
          </div>
          <div class="home_box_box_box">
            <div>1</div>
            <div>张三</div>
            <div>一级</div>
            <div>新冠</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {}
  },
  mounted() {
    // 5CD5C9
    var chartDom = document.getElementById('main');
    var chartDoms = document.getElementById('mains');
    var myCharts = echarts.init(chartDoms);
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      color: '#5CD5C9',
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        splitNumber: 5,
        type: 'value',
        data: [200, 400, 600, 800, 1000]
      },
      series: [
        {
          data: [120, 200, 150, 480, 70, 110, 130],
          type: 'bar'
        }
      ],

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      }
    };
    var options
    options = {
      color: '#5CD5C9',
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      }
    };
    option && myChart.setOption(option);
    options && myCharts.setOption(options);
  }
}
</script>

<style scoped>
.home_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px auto;
  padding: 20px 20px;
  background: #fff;
}

.home_top_div {
  width: 24%;
  height: 100px;
  display: flex;
  align-items: center;
}

.home_top_div_l {
  width: 60%;
}

.home_top_div_l img {
  margin-left: 20px;
}

.home_top_div_r {
}

.home_top_div_r_title {
  color: #fff;
  font-size: 16px;
}

.home_top_div_r_box {
  margin-top: 10px;
  color: #fff;
  font-size: 30px;
}

.home_top_div_bg1 {
  background: #33CABB;
}

.home_top_div_bg2 {
  background: #F96868;
}

.home_top_div_bg3 {
  background: #15C377;
}

.home_top_div_bg4 {
  background: #926DDE;
}

.home_echar {
  padding: 20px 20px;
  background: #fff;
  margin-top: 20px;
  display: flex;
}

.home_echar_l {
  width: 50%;
}

.home_box_l {
  background: #fff;
  width: 50%;
  margin-top: 20px;
  padding-left: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  min-height: 300px;

}

.home_box_r {
  background: #fff;
  width: 50%;
  margin-top: 20px;
  padding-left: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  min-height: 300px;
  margin-left: 20px;
}

.home_box_box {
  margin: 0px auto;
}

.home_box_l_title {
  /* font-size: 20px; */
}

.home_box_box_title {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: #444;
  text-align: left;
  font-size: 15px;
}

.home_box_box_box {
  color: #666;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  text-align: center;
}

.home_box_box_box div {
  text-align: center;
  width: 25%;
  font-size: 15px;
  line-height: 30px;
}

.home_box_box_box div:nth-child(1) {
  width: 50px !important;
}

.home_box_box_title div {
  width: 25%;
  text-align: center;
}

.home_box_box_title div:nth-child(1) {
  width: 50px !important;
}

.home_box {
  display: flex;
}

.home_box .el-divider--horizontal {
  margin: 10px
}
</style>
